<template>
  <div class="pageRight_item">
    <div class="pageItem_top">
      <div class="pageTop_left">
        <img src="/images/wuli/公司名称底@2x.png">
        <div class="pageTop_left_title">
          {{item.company_name}}
        </div>
        <div class="pageTop_left_prize">
          <div v-if="item.mapping_name" style="display: flex;">
            <div class="prize_item color">
              {{item.mapping_name}}
            </div>
          </div>
           <div v-if="item.company_type" style="display: flex;">
            <div class="prize_item ">
              {{item.company_type}}
            </div>
          </div>
        </div>
        <div class="pageTop_left_titlesub" @click="toenter(item.company_code)">
          <img src="images/wuli/悬浮档案按钮.png" >
          <img src="images/wuli/查看档案-icon.png">
        </div>
      </div>
      <div class="pageTop_address">
        <div class="pageItem_center">
          地址：{{item.reg_address}}
        </div>
        <div class="pageTop_left_prize" @click="handleQuery" ref="showBox">
          <div v-if="hasCompany"  class="build-info">
            在宁波控股或成立相关公司(机构)
          </div>
          <div v-else class="build-info" style="color: #F53A25;">
            未在宁波控股或成立相关公司(机构)
          </div>
          <div v-show="isQuery" class="query">
            <img src="/images/wuli/弹窗大底.png" alt="">
            <img src="/images/wuli/内容底.png" alt="">
            <img src="/images/wuli/close.png" alt="">
            <span>企业/机构列表</span>
            <div class="tr">
              <span style="width:45px">序号</span>
              <span>企业/机构名</span>
              <span style="width:350px">地址</span>
            </div>
            <div class="tr" style="top: 64px;">
              <div id="mychild" @mouseenter="enter" @mouseleave="leave">
                <div class="td" v-for="(inv,index) in inv_company" :key="index">
                  <span style="width:25px; text-align:center; margin-right: 20px;">{{index+1}}</span>
                  <span>{{inv.inv_company_name}}</span>
                  <span style="width:350px">{{inv.reg_address}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pageItem_bottom">
      <img src="images/wuli/五力指导icon@2x.png">
      <img src="images/wuli/五力指导底@2x.png">
      <div class="info1">五力指导：</div>
      <div class="info2" v-html="advice"></div>

    </div>
  </div>
</template>

<script>

export default {
  name: '',
  components: {},
  props: {
    id: {
      type: [String, Number],
      default: false
    },
    field: {
      type: String,
      required: true
    },
    location: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      isQuery: false,
      initInterval2: null,
      // all_items: [],
      item: {},
      inv_company: [],
      hasCompany: false,
      advice: ''
    }
  },
  computed: {
  },
  watch: {
    id: function (){
      this.item = {}
      console.log('id更新为 ',this.id)
      this.isQuery = false
      this.getQ(this.id)
      // this.getInv(this.id)
    },
    // field: function (){
    //   console.log('center的field更新为 ', this.field)
    //   this.getQ(this.id)
    //   this.getInv(this.id)
    // },    
    // location: function (){
    //   console.log('center的location更新为 ',this.location)
    //   this.getQ(this.id)
    //   this.getInv(this.id)
    // }
  },
  created () {},
  mounted () {
    this.getQ(this.id)
    // this.getInv(this.id)
  },
  methods: {
    async getQ(id){
      const url = 'http://60.190.56.81/dcockpit/rest/cockpitApi/searchListNormResult'
      
      let x = await this.$api.post(url,{
		    "normGuid": "31b4420a-2e87-4580-ab77-29ff341fe2c8",
        "fieldList": [{"key":"company_code","value": id.toString()},{"key":"mapping_name","value":this.field}]
      })
      // console.log(x.custom)
      if(x.status.code!='1'){
        console.log('中间的查询 '+this.title+' 数据获取失败')
        return
      } 
      let {custom:{result}}={...x}
      // this.all_items = result.cockpitData
      this.item = result.cockpitData[0]
      // console.log('this.item ', this.item)
      // console.log('this.item.is_local ', this.item.is_local=="1")

      // console.log('all_items ',this.all_items)
      this.getInv(id)
      this.getAdvice(id)
    },
    async getInv(id){
      const url = 'http://60.190.56.81/dcockpit/rest/cockpitApi/searchListNormResult'
      
      let x = await this.$api.post(url,{
		    "normGuid": "0caaf431-3d77-4a40-8725-eb6ab7b08ce4",
        "fieldList": [{"key":"not_local_companycode","value": id.toString()}]
      })
      // console.log(x.custom)
      if(x.status.code!='1'){
        console.log('查询被投资企业列表失败')
        return
      } 
      let {custom:{result}}={...x}
      // this.cockpitData=result.cockpitData
      this.inv_company = result.cockpitData
      // this.item = result.cockpitData[0]
      // console.log('inv_company ',this.inv_company.length)
      this.hasCompany = this.item.is_local=="1" || this.inv_company.length!=0
      if(this.inv_company.length!=0){
        this.$refs['showBox'].style = 'cursor: pointer;'
      }else{
        this.$refs['showBox'].style = 'cursor: default;'
      }
      // console.log('this.hasCompany  ',this.hasCompany,this.item.is_local=="1", this.inv_company.length!=0)

    },
    async getAdvice(id){
      const url = '/dcockpit/rest/cockpitApi/searchListNormResult'
      
      let x = await this.$api.post(url,{
		    "normGuid": "0321aec4-f570-4eff-a242-9a878832e46e",
        "fieldList": [{"key":"company_code","value": id.toString()}]
      })
      // console.log(x.custom)
      if(x.status.code!='1'){
        console.log('查询被投资企业列表失败')
        return
      } 
      let {custom:{result}}={...x}
      // this.cockpitData=result.cockpitData
      this.advice = result.cockpitData[0].develop_advice
      // this.item = result.cockpitData[0]
      // console.log('advice ',this.advice)
    },
    toenter(id){
      console.log('企业id为: ',id)
      this.$store.commit('setPath','wuli')
      this.$router.push({
        path:'/enterpriseOne',
        query:{
          // comname:'中国石油天然气集团有限公司'
          comname: this.item.company_name

        }
      })
      this.$ue4('close','close!!!')
    },
    handleQuery(){
      if(this.inv_company.length==0 || this.item.is_local=="1"){
        console.log('外地公司没有宁波分公司  这是一家本地公司')
        this.isQuery = false
        return
      }
      if(this.isQuery){
        this.isQuery = false
        // console.log('close')
        if (this.initInterval2) {
          clearInterval(this.initInterval2);
          this.initInterval2 = null;
        }
      }else{
        this.isQuery = true
        // console.log('open')
        this.autoScroll(100)
      }
    },
    autoScroll(interval) {
      let parentDom = document.getElementById('mychild')
      // console.log(parentDom) //获取滚动元素
      // console.log(parentDom.scrollTop, parentDom.clientHeight, parentDom.scrollHeight)
      if(this.initInterval2){
        return 
      }
      this.initInterval2 = setInterval(() => {
        // 判断元素是否滚动到底部(距离顶部 + 可视高度 = 整个高度)
        // 滚上去了多少 + client里的高度 >= 总高度
        if (parentDom.scrollTop + parentDom.clientHeight >= parentDom.scrollHeight) {
          parentDom.scrollTop = 0
        } else {
          parentDom.scrollTop += 2 // 元素自增距离顶部
        }
      }, interval)
    },
    enter(){
      if (this.initInterval2) {
        clearInterval(this.initInterval2);
        this.initInterval2 = null;
      }
    },
    leave(){
      this.autoScroll(100)
    }
  }
}
</script>

<style scoped lang="stylus">
.pageRight_item{
  box-sizing: border-box;
  width 100%;
  // height 136px;
  .pageItem_top{
    height 94px;
    // margin-left 22px;
    // display flex;
    .pageTop_left{
      position relative;
      width 100%;
      height 47px;
      img{
        width 395px;
        height 100%;
      }
      .pageTop_left_title{
        position absolute;
        top: 0;
        left: 30px;
        font-size 20px;
        font-family SourceHanSansCN-Regular;
        font-weight 500;
        letter-spacing: 0.25px;
        color #FFFFFF;
        display flex;
        line-height: 47px;
        height: 47px;
      }
      .pageTop_left_prize{
        position absolute;
        top: 0;
        left: 415px;
        display flex;
        // flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 330px;
        // height: 47px;
        height: 100%;

        .prize_item{
          box-sizing: border-box;
          padding: 0 8px;
          // width: 95px;
          margin-right 10px;
          // margin-bottom 5px;

          border 1px solid #2E97FF;
          border-radius 4px;
          font-size 15px;
          font-family SourceHanSansCN-Regular;
          font-weight bold;
          color #3EA5FF;
          text-align: center;
          height: 24px;
          line-height: 24px;

        }
        .color {
          border 1px solid #BF7134;
          color #EE9B5B;
        }
        .build-info {
          margin-left: 27px;
          color: #00ffff;
          font-size: 16px;
          line-height: 24px;
        }
      }
      .pageTop_left_titlesub{
        cursor: pointer;
        position absolute;
        top: 0;
        right: 0;
        text-align center;
        align-items: center;
        img:nth-child(1) {
          // cursor: pointer;
          position absolute;
          top: 0;
          right: 0;
          width 80px;
          height: 60px;
        }
        img:nth-child(2) {
          position absolute;
          top: 12px;
          right: 12px;
          width 17px;
          height: 19px;
        }
      }
    }
    .pageTop_address{
      margin-top 12px;
      margin-left 32px;
      // height: 94px;
      display: flex;
      align-items: center;
      height: 24px;
      .pageItem_center{
        text-overflow: ellipsis;
        // display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: nowrap;
        overflow: hidden;
        -webkit-line-clamp: 1;

        width: 60%;
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        line-height: 24px;
        color: rgba(193, 226, 255, 0.73);
        // padding-left: 100px;
      }
      .pageTop_left_prize{
        // cursor: pointer;
        position relative;
        display flex;
        // margin-top 5px;
        .build-info {
          margin-left: 18px;
          color: #00ffff;
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .pageItem_bottom{
    position relative;
    box-sizing: border-box;
    display: flex;
    height: 94px;
    width: 100%;
    padding-top: 18px;
    padding-right: 26px;
    padding-left: 48px;
    font-size 15px;
    font-family SourceHanSansCN-Regular;
    font-weight 500;
    line-height 26px;
    color #A5C7E7;
    // background: rgba(59, 112, 255, 0.14);
    // border: 1px solid rgba(98, 162, 205, 0.6196078431372549);
    .info1 {
      // padding-left: 10px;
      width: 90px;
      height: 100%;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
      color: #FFFFFF;
      text-shadow: 0px 3px 8px rgba(228, 194, 58, 0.5);
    }
    .info2 {
      position: relative;
      z-index: 999;
      font-size: 16px;
      width: 473px;
      padding-left: 6px;
      color: #E0EDF9;
      flex: 1;
      overflow: auto;
    }
    ::-webkit-scrollbar{
      width: 4px;
      height: 4px;
    }
    ::-webkit-scrollbar-thumb{
      background-color: rgba(46, 151, 255, 1);
      height: 4px;
    }
    img:nth-child(1) {
      position absolute;
      height: 22px;
      width: 19px;
      top: 21px;
      left: 22px;
    }
    img:nth-child(2) {
      position absolute;
      height: 94px;
      width: 746px;
      top: 0px;
      left: 11px;
    }
  }
}
.query {
  box-sizing: border-box;
  z-index: 99999;
  width: 709px;
  height: 144px;
  position absolute;
  top: 20px;
  left: -240px;
  padding: 0 21px;
  img {
    position absolute;
    top: 0px;
    left: 0;
  }
  img:nth-child(2){
    top: 63px;
    left: 21px;
  }
  img:nth-child(3){
    right: 0px;
    left: auto;
    width: 23px;
  }
  span:nth-child(4){
    margin: 0 21px;
    box-sizing: border-box;
    position absolute;
    display: inline-block;
    top: 3px;
    right: 0px;
    left: auto;
    width: 668px;
    font-size: 17px;
    font-weight: 500;
    line-height: 29px;
    color: #FFFFFF;
    text-align: center;
    border-bottom: 1px solid #3C5070;
  }
  .tr {
    position absolute;
    top: 34px;
    left: 25px;
    font-size: 15px;
    font-weight: 500;
    color: #99C8FF;
    line-height: 26px;
    height: 26px;
    span {
      display inline-block;
      width: 260px;
    }
  }
  .td {
    display: flex;
    align-items: center;
    height: 35px;
    font-size: 15px;
    font-weight: 400;
    line-height: 16px;
    color: #FFFFFF;
    span {
      text-overflow: ellipsis;
      // display: -webkit-box;
      -webkit-box-orient: vertical;
      white-space: nowrap;
      overflow: hidden;
      -webkit-line-clamp: 1;
    }
  }
}
#mychild {
  height: 73px !important;
  overflow: hidden;
}
</style>
